@import "../../styles/antdvars.less";
/* User profile */

#profile {
  .userProfile {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    /* Safari 7.0+ */
    align-content: flex-start;
    -webkit-align-content: flex-start;
    flex-direction: column;
    -webkit-flex-direction: column;
    justify-content: flex-start;
    margin-left: auto;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    /* Safari 6.1+ */
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
    margin-right: auto;
    max-width: 20rem;
    width: 100%;
  }
  .userProfile-calendarActivity {
    padding-bottom: 3rem;
  }
  .userProfile-wrapper {
    margin-top: @spacing-sm;
  }
  .matrixHeading {
    width: 100%;
  }
  .matrixHeading .ant-row {
    margin-bottom: 2rem;
  }
  h2.matrixHeading {
    width: 100%;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
  }
  #userProfile-matrix canvas {
    width: 100% !important;
    max-width: 100% !important;
  }
  #profileLanguages {
    display: inline-flex;
    align-items: baseline;
  }
  #profileLanguages a {
    display: block;
    padding-right: @spacing-md;
  }
  .userProfile-details {
    width: 100%;
    min-width: 21rem;
    max-width: 24rem;
    margin-bottom: @spacing-lg;
  }
  img.userProfile-details-avatar {
    border-radius: 500px;
    margin-left: auto;
    float: right;
    overflow: hidden;
    width: 30%;
  }
  .userProfile .username {
    font-size: 1.728rem;
    font-weight: 600;
  }
  ul.largeFontList {
    padding-left: 0;
    overflow: hidden;
  }
  span.userProfile-email {
    margin-left: @spacing-sm;
    color: @muted-color;
  }
  ul.largeFontList li.u-flexCenter svg, ul#profileLanguages svg {
    margin-right: @spacing-sm;
    vertical-align: sub;
    color: @muted-color;
  }
  ul#profileLanguages svg {
    vertical-align: sub;
  }
  #userProfile-matrix tbody tr td:not(:first-child), #userProfile-matrix tr th:not(:first-child) {
    text-align: center;
  }
  #userProfile-overview {
    align-items: flex-start;
    -webkit-align-items: flex-start;
    /* Safari 7.0+ */
    align-content: flex-start;
    -webkit-align-content: flex-start;
    flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    justify-content: flex-start;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    /* Safari 6.1+ */
    width: 100%;
    margin-bottom: @spacing-lg;
  }
  #profile-displayname {
    margin-bottom: @spacing-sm;
    margin-top: 0;
    padding-right: @spacing-sm;
    height: 100%;
  }
  #userProfile-matrix h2, #userProfile-matrix h3 {
    color: @primary-color;
    font-size: 1.2rem;
    margin-bottom: 0;
  }
  #userProfile-matrix h3 {
    margin-top: 1rem;
  }
  h2.userProfile-recentContributions {
    font-weight: 600;
    text-transform: uppercase;
    width: 90%;
  }
  .userProfile-activityGraph {
    background-clip: padding-box;
    border-width: @spacing-sm;
    border-color: transparent;
    border-style: solid;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: center;
    vertical-align: top;
    margin-bottom: @spacing-lg;
    width: 100%
  }
  .userProfile-activityGraph h3 {
    color: @primary-color;
  }
  .userProfile-activityGraph .matrixBox {
    position: relative !important;
  }
  .userProfile-activityGraph .cal-date {
    font-size: 0.833rem !important;
    padding-top: @spacing-sm;
    padding-bottom: @spacing-sm;
    background-color: rgba(255, 255, 255, 0.15);
  }
  .userProfile-activityGraph .cal-info {
    background-color: rgba(255, 255, 255, 0.30);
    padding-top: @spacing-sm;
    padding-bottom: @spacing-sm;
    font-weight: 600;
  }
  .userProfile-activityTable-inner {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    margin-bottom: @spacing-sm;
  }
  #userProfile-activityTable td button {
    height: 4rem;
    padding: 0 !important;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
  #userProfile-activityTable td button.btn-primary {
    background-color: rgba(84, 102, 119, 0.65) !important;
  }
  #userProfile-activityTable td button.btn-warning {
    background-color: rgba(233, 221, 0, 0.65);
    color: @primary-color;
  }
  #userProfile-activityTable td button.btn-info {
    background-color: rgba(2, 154, 207, 0.65);
  }
  #userProfile-activityTable td button.btn-success {
    background-color: rgba(98, 200, 118, 0.65);
  }
  table.userProfile-activityGraph tr td {
    padding-bottom: 0.5rem;
    padding-left: 0;
    padding-right: 0;
  }

 .ant-btn.success.btn-default.ant-btn-sm, .ant-btn.plain.btn-default.ant-btn-sm, .ant-btn.primary.btn-default.ant-btn-sm, .ant-btn.unsure.btn-default.ant-btn-sm {
    border: solid 1px #e7e7e7;
    margin-bottom: 0.5rem;
  }

  .ant-tag-checkable {
    cursor: pointer;
    border: solid 1px;
  }

  .ant-tag.plain {
    color: rgba(84, 102, 119, 0.95);
    border-color: rgba(84, 102, 119, 1);
    &:hover {
      background-color: rgba(84, 102, 119, 0.5);
      color: #fff;
    }
    &.ant-tag-checkable-checked {
      background-color: rgba(84, 102, 119, 0.95);
      color: #fff;
    }
  }

  .ant-tag.primary {
    color: rgba(3, 166, 215, 0.95);
    border-color: rgba(3, 166, 215, 1);
    &:hover {
      background-color: rgba(3, 166, 215, 0.5);
      color: #fff;
    }
    &.ant-tag-checkable-checked {
      background-color: rgba(3, 166, 215, 0.95);
      color: #fff;
    }
  }

  .ant-tag.success {
    color: rgba(98, 200, 118, 0.95);
    border-color: rgba(98, 200, 118, 1);
    &:hover {
      background-color: rgba(98, 200, 118, 0.5);
      color: #fff;
    }
    &.ant-tag-checkable-checked {
      background-color: rgba(98, 200, 118, 0.95);
      color: #fff;
    }
  }

  .ant-tag.unsure {
    color: rgba(233, 221, 0, 1);
    border-color: rgba(233, 221, 0, 1);
    &:hover {
      background-color: rgba(233, 221, 0, 0.5);
      color: @primary-color;
    }
    &.ant-tag-checkable-checked {
      background-color: rgba(233, 221, 0, 1);
      color: @primary-color;
    }
  }

  #userProfile-activityTable td button.active.btn.btn-primary {
    background-color: @primary-color;
  }
  #userProfile-activityTable td button.active.btn.btn-warning {
    background-color: @unsure-color;
    color: #222;
  }
  #userProfile-activityTable td button.active.btn.btn-info {
    background-color: @info-color;
  }
  #userProfile-activityTable td button.active.btn.btn-success {
    background-color: @success-color;
  }
  #userProfile-activityTable td button.btn-primary:focus, #userProfile-activityTable td button.btn-info:focus, #userProfile-activityTable td button.btn-warning:focus, #userProfile-activityTable td button.btn-success:focus {
    outline: 0;
    color: #fff;
    box-shadow: none;
  }
  #userProfile-activityTable td button.btn-warning:focus {
    background-color: rgba(233, 221, 0, 0.95);
    color: @primary-color;
  }
  #userProfile-activityTable td button.btn-primary:focus {
    background-color: rgba(84, 102, 119, 0.85);
  }
  #userProfile-activityTable td button.btn-info:focus {
    background-color: rgba(2, 154, 207, 0.85);
  }
  #userProfile-activityTable td button.btn-success:focus {
    background-color: rgba(98, 200, 118, 0.85);
  }
  #userProfile-activityTable .btn-clear {
    margin-top: @spacing-base;
    padding: 0;
    margin-left: @spacing-base;
  }
  #userProfile-activityTable th {
    text-align: center;
  }
  #userProfile-activityTable td .btn {
    width: 85%;
    border-radius: 0;
    line-height: 1.4rem;
    padding: 0 !important;
    border: none;
    margin: @spacing-md;
  }
  .matrix-inner {
    width: 100%;
    margin-right: @spacing-base;
  }
  // @screen-xs variable depreciated
  @media (max-width: 575.98px) {
  .matrix-table {
      display: block;
    }
    .matrixHeading {
      padding-bottom: @spacing-base;
    }
    #userProfile-matrix {
      padding-left: 0;
    }
  }
  @media (min-width: 576px) and (max-width: 767.98px) {
    .matrix-table {
      display: flex;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      flex-direction: row;
      -webkit-flex-direction: row;
    }
    #userProfile-matrix h2 {
      margin-top: 0;
    }
    h2.matrixHeading {
      max-width: 100%;
      min-width: 100%;
    }
  }
  @media (min-width: 767.99px) {
    .matrixHeading {
      padding-right: @spacing-md;
      padding-left: @spacing-md;
    }
    h2.matrixHeading {
      min-width: 0;
      margin-left: 3rem;
    }
    .matrix-inner {
      margin-right: @spacing-lg;
    }
  }
  @media (min-width: 767.99px) and (max-width: 992px) {
    .userProfile-wrapper {
      flex-direction: column;
      -webkit-flex-direction: column;
    }
  }
  @media (min-width: 1200px) {
    .userProfile-wrapper {
      flex-direction: row;
      -webkit-flex-direction: row;
    }
    .matrix-table {
      display: flex;
      flex-direction: row;
      -webkit-flex-direction: row;
    }
    .matrix-inner {
      margin-right: @spacing-xl;
    }
  }
}
@media (min-width: 992px) {
  .wideView {
    margin-top: @spacing-sm;
  }
}
.ant-calendar-range-middle {
  left: 40%;
  margin-left: -112px;
}
